<template>
    <div class="app-container">
        <!-- 查看或者编辑页面 -->
        <div class="main-left">
            <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules" >
                <el-form-item label="学科名："  prop="subjectName" required>
                    <el-input v-model="form.subjectName" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="排序规则："  prop="itemOrder" required >
                    <el-input v-model="form.itemOrder" style="width:300px"></el-input>
                </el-form-item>
                <!-- <el-form-item label="年级：">
                    <el-select v-model="form.levelGrade" placeholder="年级" clearable>
                    <el-option v-for="item in subjectEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button @click="close" >关闭</el-button>
                </el-form-item>
            </el-form>
        </div>     
    </div>
</template>

<script>
import {getSubjectById,editSubject} from '@/api/subject/subject'
export default {
    name: 'editSubject',
    mounted(){
        // 找单个路由要信息
        let id = this.$route.query.id;
        if(id && parseInt(id) != 0){
            getSubjectById(id).then(resp=>{
                this.form = resp.data;
            });
        }

    },
    data(){
        return{
            form: {
                id: null,
                subjectName: '',
                itemOrder: 1,
            },
            formLoading: false,
            rules: {
                subjectName: [
                { required: true, message: '请输入学科名', trigger: 'blur' }
                ],
            },
            subjectEnum:[
                {
                    key : 1,
                    value: '大一',
                },
                {
                    key : 2,
                    value: '大二',
                },
                {
                    key : 3,
                    value: '大三',
                },
                {
                    key : 4,
                    value: '大四',
                },
            ]
        }
    },
    methods:{
        resetForm(){
                this.form.id = null;
                this.form.subjectName ='',
                this.form.itemOrder=''
        },
        submitForm(){
                this.$refs.form.validate((valid) => {
                    if(valid){
                        this.formLoading = true;
                        editSubject(this.form).then((resp) =>{
                            console.log(resp.code);
                            if(resp.code == 200){
                                this.$message.success(resp.message);
                                this.$router.push('/subject/index')
                            }else{
                                this.$message.error(resp.message);
                                this.formLoading = false;
                            }
                        }).catch(e=>{
                            this.formLoading = false;
                        })
                    }else{
                        return false;
                    }
            })
        },
        close(){
            this.$router.push('/subject/index')
        },
        // getLevelName(val){
        //     this.subjectEnum.forEach(item =>{
        //         if(item.key === val){
        //             this.form.levelName = item.value;
        //             return;
        //         }
        //     })
        // }
    }
}
</script>

<style scoped>
    .main-left{
        float: left;
        margin-left: 10%;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    }
    .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    }
    .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-left: 2px;
    border-radius: 50%;
    }
    .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
    } 
</style>